<template>
	<view>
		<!-- <view class="popup-mask" v-if="show" @click="close"></view> -->

		<view class="popup-view" v-if="show" @click.stop>
			<slot></slot>
			<button @click="close" class="close-btn">关闭</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HalfScreenPopup",
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		emits: ['update:show'],
		methods: {
			close() {
				this.$emit('update:show', false)
			}
		}
	}
</script>

<style scoped>
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		/* z-index: 999; */
	}

	.popup-view {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50%;
		background: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx;
		/* z-index: 1000; */
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0%);
		}
	}

	.close-btn {
		margin-top: 40rpx;
		background: #eee;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
	}
</style>